/**
 * Created by GeneralMou on 2019/12/19.
 * wechat：GeneralMou
 */
export function RotatingCircle(canvas, optsParam, txtOptsParam) {
  // eslint-disable-next-line no-new-object
  var obj = new Object()
  obj.ctx = canvas.getContext('2d')
  // eslint-disable-next-line eqeqeq
  if (canvas.clientWidth == 0 || canvas.clientHeight == 0) {
    obj.size = Math.min(canvas.width, canvas.height)
  } else {
    obj.size = Math.min(canvas.clientWidth, canvas.clientHeight)
  }
  console.log(obj.size, 'size')
  obj.opts = optsParam
  obj.txtOpts = txtOptsParam
  obj.degreeStart = 0
  obj.degreeEnd = 0
  obj.clockmoveStep = 0
  obj.clockmoveStepOut = 0
  obj.clockmoveStepOut1 = 0

  obj.init = function() {
    obj.createCircle()
  }

  obj.createFont = function() {
    this.ctx.clearRect(0, 0, this.size, this.size)// 清楚之前的虚影
    this.ctx.font = '30px Arial'
    this.ctx.fillText('Hello World', this.size, this.size)
  }

  obj.createCircle = function() {
    // 画圆
    var _curOpts = this.opts[0]
    var radius = _curOpts.radius
    var lineWidth = _curOpts.lineWidth// 线宽度
    var strokeStyle = _curOpts.strokeStyle// 颜色

    var stepStart = _curOpts.stepStart
    var stepEnd = _curOpts.stepEnd
    // eslint-disable-next-line no-unused-vars
    var angleSpeed = _curOpts.angleSpeed
    this.degreeStart = this.degreeStart + stepStart
    this.degreeEnd = this.degreeEnd + stepEnd
    if (this.degreeStart - 360 > this.degreeEnd) {
      this.degreeStart -= 720
    }

    this.ctx.clearRect(0, 0, this.size, this.size)// 清楚之前的虚影
    this.ctx.lineWidth = lineWidth
    this.ctx.strokeStyle = strokeStyle
    this.ctx.beginPath()
    this.ctx.arc(this.size / 2, this.size / 2, radius - lineWidth / 2, (this.degreeStart < this.degreeEnd ? this.degreeStart : this.degreeEnd) * Math.PI / 180, (this.degreeStart < this.degreeEnd ? this.degreeEnd : this.degreeStart) * Math.PI / 180, false)
    this.ctx.stroke()
    //                var angleDiff = ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() ;

    //                console.log("----", time.getMilliseconds());
    //                console.log(angleDiff);

    //                this.ctx.translate(this.size / 2, this.size / 2);
    //                // 弧度=(Math.PI/180)*角度。
    //                this.ctx.rotate(angleDiff);
    //                this.ctx.translate(-this.size / 2, -this.size / 2);
    //                this.ctx.save();

    // 画第二个圈
    this.ctx.save()
    var _curOpts2 = this.opts[1]
    var lineWidth2 = _curOpts2.lineWidth// 线宽度
    var strokeStyle2 = _curOpts2.strokeStyle// 颜色
    var radius2 = _curOpts2.radius
    var degreeStart2 = _curOpts2.degreeStart
    var degreeEnd2 = _curOpts2.degreeEnd
    this.ctx.lineWidth = lineWidth2
    this.ctx.strokeStyle = strokeStyle2
    //                this.ctx.fillStyle = "RGBA(6,58,73,0.8)";
    this.ctx.beginPath()
    this.ctx.arc(this.size / 2, this.size / 2, radius2 - lineWidth2 / 2, (degreeStart2) * Math.PI / 180, (degreeEnd2) * Math.PI / 180, false)
    this.ctx.stroke()
    this.ctx.restore()

    // 刻度盘
    this.ctx.save()
    var _curOpts4 = this.opts[3]
    var _emFillStyle4 = _curOpts4.emFillStyle
    var _fillStyle4 = _curOpts4.fillStyle
    var _step4 = _curOpts4.step
    var _radius4 = _curOpts4.radius
    var _lengthParam4 = _curOpts4.lengthParam
    this.ctx.lineWidth = _curOpts4.lineWidth
    this.ctx.translate(this.size / 2, this.size / 2)
    for (var i = 0; i < 60; i++) {
      // eslint-disable-next-line eqeqeq
      if (i % 5 != 0) {
        if (i >= this.clockmoveStep && i < this.clockmoveStep + _step4) {
          this.ctx.strokeStyle = _emFillStyle4
        } else {
          this.ctx.strokeStyle = _fillStyle4
        }
        this.ctx.beginPath()
        this.ctx.moveTo(_radius4, 0)

        this.ctx.lineTo(_radius4 + _lengthParam4, 0)
        this.ctx.stroke()
      }

      this.ctx.rotate((-Math.PI / 60))
      //                    this.ctx.rotate(((2*Math.PI)/180000)*time.getMilliseconds() );
    }
    this.clockmoveStep = this.clockmoveStep >= 60 ? 0 : (this.clockmoveStep + 0.2)
    this.ctx.restore()

    // 下半部分
    this.ctx.save()
    var _curOpts6 = this.opts[5]
    var _emFillStyle6 = _curOpts6.emFillStyle
    var _fillStyle6 = _curOpts6.fillStyle
    var _step6 = _curOpts6.step
    var _radius6 = _curOpts6.radius
    var _lengthParam6 = _curOpts6.lengthParam
    this.ctx.lineWidth = _curOpts6.lineWidth
    this.ctx.translate(this.size / 2, this.size / 2)
    this.ctx.rotate(Math.PI)
    for (let i = 0; i < 60; i++) {
      // eslint-disable-next-line eqeqeq
      if (i % 5 != 0) {
        if (i >= this.clockmoveStep && i < this.clockmoveStep + _step6) {
          this.ctx.strokeStyle = _emFillStyle6
        } else {
          this.ctx.strokeStyle = _fillStyle6
        }
        this.ctx.beginPath()
        this.ctx.moveTo(_radius6, 0)

        this.ctx.lineTo(_radius6 + _lengthParam6, 0)
        this.ctx.stroke()
      }

      this.ctx.rotate((-Math.PI / 60))
      //                    this.ctx.rotate(((2*Math.PI)/180000)*time.getMilliseconds() );
    }
    this.clockmoveStep = this.clockmoveStep >= 60 ? 0 : (this.clockmoveStep + 0.1)
    this.ctx.restore()

    // 画第三个圈
    this.ctx.save()
    var _curOpts3 = this.opts[2]
    var lineWidth3 = _curOpts3.lineWidth// 线宽度
    var strokeStyle3 = _curOpts3.strokeStyle// 颜色
    var radius3 = _curOpts3.radius
    var degreeStart3 = _curOpts3.degreeStart
    var degreeEnd3 = _curOpts3.degreeEnd
    this.ctx.lineWidth = lineWidth3
    this.ctx.strokeStyle = strokeStyle3
    //                this.ctx.fillStyle = "RGBA(6,58,73,0.8)";
    this.ctx.beginPath()
    this.ctx.arc(this.size / 2, this.size / 2, radius3 + lineWidth3 + 14, (degreeStart3) * Math.PI / 180, (degreeEnd3) * Math.PI / 180, false)
    this.ctx.stroke()

    this.ctx.restore()

    // 写字
    this.ctx.save()
    this.ctx.beginPath()
    this.ctx.restore()
    this.ctx.font = this.txtOpts.font
    this.ctx.textAlign = this.txtOpts.align
    this.ctx.fillStyle = this.txtOpts.txtColor
    this.ctx.textBaseline = this.txtOpts.textBaseline
    this.ctx.fillText(this.txtOpts.content, this.size / 2, this.size / 2)
    this.ctx.restore()

    // 刻度盘,内层
    this.ctx.save()
    var _curOpts5 = this.opts[4]
    var _emFillStyle5 = _curOpts5.emFillStyle
    var _fillStyle5 = _curOpts5.fillStyle
    var _step5 = _curOpts5.step
    var _speed5 = _curOpts5.speed
    var _radius5 = _curOpts5.radius
    var _lineWidth5 = _curOpts5.lineWidth
    this.ctx.translate(this.size / 2, this.size / 2)
    this.ctx.lineWidth = _lineWidth5

    // eslint-disable-next-line no-redeclare
    for (var i = 0; i < 60; i++) {
      // 处理渐变尾巴
      if ((i >= this.clockmoveStepOut && i < this.clockmoveStepOut + _step5)) {
        this.ctx.fillStyle = 'RGBA(' + _emFillStyle5 + ',' + (i - this.clockmoveStepOut) / 20 + ')'
      } else if (i >= (this.clockmoveStepOut + 20) && i < this.clockmoveStepOut + 20 + _step5) {
        this.ctx.fillStyle = 'RGBA(' + _emFillStyle5 + ',' + (i - this.clockmoveStepOut - 20) / 20 + ')'
      } else if (i >= (this.clockmoveStepOut + 40) && i < this.clockmoveStepOut + 40 + _step5) {
        this.ctx.fillStyle = 'RGBA(' + _emFillStyle5 + ',' + (i - this.clockmoveStepOut - 40) / 20 + ')'
      } else if (this.clockmoveStepOut + (40 + _step5) > 60 && i < (this.clockmoveStepOut + (40 + _step5) - 60)) {
        this.ctx.fillStyle = 'RGBA(' + _emFillStyle5 + ',' + (20 - this.clockmoveStepOut + i) / 20 + ')'
      } else {
        this.ctx.fillStyle = _fillStyle5
      }
      this.ctx.beginPath()
      this.ctx.arc(_radius5, 0, _lineWidth5, 0, Math.PI * 2, false)
      this.ctx.fill()

      this.ctx.rotate((Math.PI / 30))
    }
    this.clockmoveStepOut = this.clockmoveStepOut >= 20 ? 0 : (this.clockmoveStepOut + _speed5)
    this.ctx.restore()

    // 最外层
    // 刻度盘,外层
    this.ctx.save()
    var _curOpts7 = this.opts[6]
    var _emFillStyle7 = _curOpts7.emFillStyle
    var _fillStyle7 = _curOpts7.fillStyle
    var _step7 = _curOpts7.step
    var _speed7 = _curOpts7.speed
    var _radius7 = _curOpts7.radius
    var _lineWidth7 = _curOpts7.lineWidth
    this.ctx.translate(this.size / 2, this.size / 2)
    this.ctx.lineWidth = _lineWidth7

    // eslint-disable-next-line no-redeclare
    for (let i = 0; i < 60; i++) {
      // 处理渐变尾巴
      if ((i >= this.clockmoveStepOut1 && i < this.clockmoveStepOut1 + _step7)) {
        this.ctx.fillStyle = 'RGBA(' + _emFillStyle7 + ',' + (i - this.clockmoveStepOut1) / 20 + ')'
      } else if (i >= (this.clockmoveStepOut1 + 20) && i < this.clockmoveStepOut1 + 20 + _step7) {
        this.ctx.fillStyle = 'RGBA(' + _emFillStyle7 + ',' + (i - this.clockmoveStepOut1 - 20) / 20 + ')'
      } else if (i >= (this.clockmoveStepOut1 + 40) && i < this.clockmoveStepOut1 + 40 + _step7) {
        this.ctx.fillStyle = 'RGBA(' + _emFillStyle7 + ',' + (i - this.clockmoveStepOut1 - 40) / 20 + ')'
      } else if (this.clockmoveStepOut1 + (40 + _step7) > 60 && i < (this.clockmoveStepOut1 + (40 + _step7) - 60)) {
        this.ctx.fillStyle = 'RGBA(' + _emFillStyle7 + ',' + (20 - this.clockmoveStepOut1 + i) / 20 + ')'
      } else {
        this.ctx.fillStyle = _fillStyle7
      }
      this.ctx.beginPath()
      this.ctx.arc(_radius7, 0, _lineWidth7, 0, Math.PI * 2, false)
      this.ctx.fill()

      this.ctx.rotate((Math.PI / 30))
    }
    this.clockmoveStepOut1 = this.clockmoveStepOut1 >= 20 ? 0 : (this.clockmoveStepOut1 + _speed7)
    this.ctx.restore()
  }

  obj.chageTxt = function(content) {
    if (this.txtOpts == null) {
      this.txtOpts.content = content
    }
  }

  return obj
}
